import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, Card,Form, Input, Select, Table, Tag } from 'antd'
import {PlusOutlined,FormOutlined,DeleteOutlined} from "@ant-design/icons"
import {
  reqCategoryType,
  requestCategory1,
  requestCategory2,
  requestCategory3,
  requestAttrList,
  attrListType,
  requestDeleteAttr,
} from "@api/product/index"
const { Option } = Select

const onFinish = (values: any) => {
  console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};



export default function Attr() {
  const columns = [
    {
      title: '序号',
      dataIndex: 'name',
      key: 'name',
      render:(_:any,__:any,index:any)=>{
        return index+1
      }
    },
    {
      title: '名称',
      dataIndex: 'attrName',
      key: 'attrValueList',
    },
    {
      title: '属性值名称列表',
      dataIndex: 'attrValueList',
      key: 'address',
      render:(attrValueList:any)=>{
        
        return attrValueList.map((item: any)=>{
           return <Tag color="magenta" key={item.id}>{item.valueName}</Tag>
        })
      }
    },
    {
      title:'操作',
      render:(_:any,data:any)=>{
        return (
          <div>
              <Button type="primary" icon={<FormOutlined /> } size="large"  onClick={()=>gotoAddUpdata(data)}></Button>
              <Button   danger  icon={<DeleteOutlined />} size="large" onClick={()=>{deleteAttr(data.id)}}></Button>
          </div>
        )
      }
    }
  ]

  //三级列表的列表的数据
  const [categoryList1,setCategoryList1] = useState<reqCategoryType>([])
  const [categoryList2,setCategoryList2] = useState<reqCategoryType>([])
  const [categoryList3,setCategoryList3] = useState<reqCategoryType>([])
  //设置当前三级列表的id数据
  const [category1Id,setCategory1Id] =useState<number>()
  const [category2Id,setCategory2Id] =useState<number>()
  const [category3Id,setCategory3Id] =useState<number>()
  //路由跳转
  const navigate  =  useNavigate()
  //定义下方Table的数据类型
  const [TableItem,setTableItem] =useState<attrListType>()
  //初始化数据
  useEffect(()=>{
    getCategoryList()
  },[])

  //1.拿到一级列表的数据
  const getCategoryList = async ()=>{
    const result = await requestCategory1()
    //设置数据
    setCategoryList1(result)
  }
  //2.点击一级列表的回调,并发送二级列表请求
  const category1ID= async (e:any)=>{
    // console.log(e);拿到对应的一级列表的id再来请求 二级列表的id
      const result =  await requestCategory2(e)
      setCategoryList2(result)
      //设置1id
      setCategory1Id(e)
  }
  //3.点击二级列表的数据，并发送三级列表请求
  const category2ID =async (e:any)=>{
      const result = await requestCategory3(e)
      setCategoryList3(result)
      //设置2id
      setCategory2Id(e)
  }
  //4.根据三级列表请求最后的表格数据
  const getTabelList =async (e:any)=>{
      //设置3id
      setCategory3Id(e)
      const result = await requestAttrList(
        category1Id as number,
        category2Id as number,
        e as number
        )
        setTableItem(result)
  }
  //5.点击删除按钮  删除对应的平台管理属性
  const deleteAttr=async (id:number)=>{
    console.log(id);
    await requestDeleteAttr(id)
    //重新获取下面数据
    getTabelList(category3Id)
  }
  //6.点击修改按钮或者添加按钮,跳转到删除和修改页面
  const gotoAddUpdata=(data?:any)=>{
    
    if (data) {
      const newArr = data.attrValueList.map((item: any) => {
        return { ...item, isEdit: true }
      })
      data.attrValueList = newArr
      navigate(`/syt/product/addupdata?`, {

        state: {
          attrName: data
        }
      })
    }else{
      navigate(`/syt/product/addupdata?id=${category3Id}`,{
        state:{
          attrName:data
        }
      })
    }
  }

  return (
    <div>
      {/* 头部三级列表 */}
      <Card>
        <Form
          name="basic"
          labelCol={{ span: 10 }}
          layout="inline"
          wrapperCol={{ span: 20 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="一级分类"
          >
            <Select style={{ width: 200 }} placeholder="请选择" onChange={category1ID} >
              {
                categoryList1.map(item=>{
                  return   <Option   key={item.id}  value={item.id} >{item.name}</Option>
                })
              }
            </Select>
          </Form.Item>

          <Form.Item
            label="二级分类"
          >
            <Select style={{ width: 200 }} placeholder="请选择" onChange={category2ID} >
            {
                categoryList2.map(item=>{
                  return   <Option   key={item.id}  value={item.id} >{item.name}</Option>
                })
              }
            </Select>
          </Form.Item>

          <Form.Item
            label="三级分类"
          >
            <Select style={{ width: 200 }} placeholder="请选择" onChange={getTabelList}>
            {
                categoryList3.map(item=>{
                  return   <Option   key={item.id}  value={item.id} >{item.name}</Option>
                })
              }
            </Select>
          </Form.Item>
        </Form>
      </Card>
      {/* 内容数据 */}
      <Card >
        <Button type="primary" icon={<PlusOutlined />}  onClick={()=>{gotoAddUpdata()}} disabled={!category3Id}>添加</Button>
        <br /><br />
        <Table 
        dataSource={TableItem} 
        columns={columns} 
        bordered
        rowKey="id"
        pagination={false}
        />
      </Card>
        
    </div>


    
  )
}
